<template>
  <div class="m-nav">
    <ul class="nav-wrapper clear-float">
      <li class="item0 change-border"><a class="change-color" href="">商品亮点</a></li>
      <li class="item1"><a href="">行程安排</a></li>
      <li class="item2"><a href="">费用说明</a></li>
      <li class="item3"><a href="">预定须知</a></li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'm-nav',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-nav{
    width: 100%;
    height: 0.9rem;
    border-bottom: 1px solid #D7D7D7;
    border-top: 1px solid #D7D7D7;
    background-color: #FFF;
    font-size: 0.3rem;
    color: #333;
  }
  /*.clear-float:after{*/
    /*display: block;*/
    /*clear: both;*/
    /*content: '';*/
  /*}*/
  ul{
    width: 100%;
    height: 100%;
  }
  ul>li{
    float: left;
    width: 25%;
    padding-top: 0.21rem;
    padding-bottom: 0.23rem;
    text-align: center;
  }
  .change-color{
    color: #FF6633;
  }
  .change-border{
    border-bottom: 5px solid #FF6633;
  }
</style>
